<template>
	<view>
		<view class="weibao-item">
			<view class="item-top">
				<view class="left">
					<view style="color: red;">*</view>{{infoList.itemName}}
				</view>
				<view :class="[infoList.maintainResult==1?'right':infoList.maintainResult==2?'right2':'']">
					{{infoList.maintainResult==1?'正常':infoList.maintainResult==2?'异常':''}}
				</view>
			</view>
			<view class="item-bottom">
				{{infoList.content}}
			</view>
		</view>
		<u-gap height="8" bgColor="#f2f2f2"></u-gap>
		<view class="bx-list" style="border-bottom:1px solid #f2f2f2;">
			<view class="bx-list-title" @click="togodealWay">
				<view class="left">
					<view style="color: red;">*</view>处理方式
				</view>
				<view class="right1">
					<view class="color4" v-if="saveParams.dealWayName!=''">{{saveParams.dealWayName}}</view>
					<view v-else>请选择</view>
					<!-- <view>{{saveParams.dealWayName!=''?saveParams.dealWayName:'请选择'}}</view> -->
					<view class="iconfont icon-app-xiangyou"></view>
				</view>
			</view>
		</view>
		<view class="bx-list" style="border-bottom:1px solid #f2f2f2;">
			<view class="bx-list-title" @click="togochuliSelect">
				<view class="left">
					<view style="color: red;">*</view>处理人
				</view>
				<view class="right1">
					<view class="color4" v-if="saveParams.dealUserName!=''">{{saveParams.dealUserName}}</view>
					<view v-else>请选择</view>
					<view class="iconfont icon-app-xiangyou"></view>
				</view>
			</view>
		</view>
		<view class="kiss-upDown-list bx-list" style="padding: 12rpx 0 0 0;">
			<view class="bx-list-title">
				<view class="left">
					<view style="color: red;" v-if="saveParams.dealWay==2">*</view>
					异常描述
				</view>
			</view>
			<view class="input-textrea">
				<u--textarea class="textrea" v-model="saveParams.description" placeholder="请输入异常描述"></u--textarea>
			</view>
		</view>
		<view class="bx-title" style="padding: 32rpx;">
			<view class="left">
				<view style="color: red;" v-if="saveParams.dealWay==2">*</view>
				异常照片<view style="color: #8c8c8c;">(可传视频或图片，最多9个)</view>
			</view>
		</view>
		<view class="bx-upload">
			<uploadVideo @getdata="getdata" @delete="deletePicture" :fileType="type==1?16:17" :file="file">

			</uploadVideo>
		</view>
		<u-gap height="1" bgColor="#f2f2f2"></u-gap>
		<view class="bottom-subside"></view>
		<view class="bx-bottom">
			<view class="btn-right" @click="saveConfirm">保存</view>
		</view>
		<!-- 处理方式 -->
		<u-popup :show="showDealWay" mode="bottom" :round="10" @close="close" @open="open">
			<view class="sex-select">
				<view class="sex-item" @click="updateItem(item)" v-for="(item,index) in dealWayList" :key="index">
					{{item.name}}
				</view>
			</view>
		</u-popup>
		<!-- 处理人 -->
		<u-popup :show="showdealUser" mode="bottom" :round="10" @close2="close" @open2="open">
			<view class="sex-select">
				<view class="sex-item" @click="updateItem2(item)" v-for="(item,index) in dealUserList" :key="index">
					{{item.realName}}
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import uploadVideo from '@/components/uploadVideo/index.vue'
	export default {
		components: {
			uploadVideo
		},
		data() {
			return {
				showDealWay: false,
				showdealUser: false,
				dealWayList: [],
				infoList: {},
				saveParams: {
					dealWay: '',
					dealWayName: '',
					dealUser: '',
					dealUserName: '',
					description: '',
					pictures: '',
					itemList: {}
				},
				pictrueList: [],
				dealUserList: [],
				type: '', //1-维保任务 2-点检任务
				fileList1: [],
				file: '',
			}
		},
		onLoad(options) {
			if (options) {
				this.infoList = JSON.parse(decodeURIComponent(options.itemInfo));
				this.saveParams.itemList = this.infoList;
				this.type = options.type;
				if (options.type == 1) {
					this.dealWayList = [{
							name: '维保处理',
							value: 1
						},
						{
							name: '维保报修处理',
							value: 2
						}
					]
				} else if (options.type == 2) {
					this.dealWayList = [{
							name: '点检处理',
							value: 1
						},
						{
							name: '点检报修处理',
							value: 2
						}
					]
				}

				//处理方式
				this.saveParams.dealWay = this.infoList.dealWay;
				this.dealWayList.forEach(s => {
					if (s.value == this.infoList.dealWay) {
						this.saveParams.dealWayName = s.name;
					}
				})
				//获取当前用户信息并且渲染、、
				// 处理人
				this.saveParams.dealUser = this.infoList.dealUser
				this.saveParams.dealUserName = this.infoList.dealUserName


				//异常描述
				this.saveParams.description = this.infoList.description;
				//异常照片
				this.fileList1 = [];
				this.saveParams.pictures = this.infoList.pictures;

				if (this.infoList.pictures) {
					this.file = this.infoList.pictures;
				}


				if (this.infoList.pictures != "") {
					var pictures = this.infoList.pictures.split(',')
					pictures.forEach(s => {
						let dd = {
							url: s
						}
						this.fileList1.push(dd);
					})
				}
			}
			this.getdealUserList()
		},
		onShow() {},
		methods: {
			getdealUserList() {
				uni.$u.http.get(`/base/mobile/userDirector/getDirectorList//4`).then(res => {
					if (res.code == 0) {
						this.dealUserList = res.data;
					}
				}).catch(err => {})
			},
			open() {},
			close() {
				this.showDealWay = false
			},
			togodealWay() {
				this.showDealWay = true;
			},
			updateItem(item) {
				this.saveParams.dealWayName = item.name;
				this.saveParams.dealWay = item.value;
				if (this.saveParams.dealWay == 1) {
					//处理人
					let userInfo = uni.getStorageSync('userInfo');

					this.saveParams.dealUser = userInfo.userId;
					this.saveParams.dealUserName = userInfo.realName;

				} else {
					this.saveParams.dealUser = '';
					this.saveParams.dealUserName = '';
				}
				this.showDealWay = false;
			},
			open2() {},
			close2() {
				this.showdealUser = false
			},
			togochuliSelect() {
				if (this.saveParams.dealWay == 1) {
					return
				} else {
					this.showdealUser = true;
				}
			},
			updateItem2(item) {
				this.saveParams.dealUser = item.id;
				this.saveParams.dealUserName = item.realName;
				this.showdealUser = false;
			},
			getdata(e) {
				this.pictrueList = e;
				this.fileList1 = [];
				if (this.pictrueList.length > 0) {
					this.saveParams.pictures = "";
					let arry = []
					this.pictrueList.map(item => {
						arry.push(item)
						let dd = {
							url: item
						}
						this.fileList1.push(dd);
					})
					this.saveParams.pictures = arry.toString()
				}
			},
			deletePicture(e) {
				this.pictrueList = e;
				this.fileList1 = [];
				if (this.pictrueList.length > 0) {
					this.saveParams.pictures = "";
					let arry = []
					this.pictrueList.map(item => {
						arry.push(item)
						let dd = {
							url: item
						}
						this.fileList1.push(dd);
					})
					this.saveParams.pictures = arry.toString()
				} else {
					this.saveParams.pictures = ''
				}
			},
			saveConfirm() {
				if (!this.saveParams.dealWay) return uni.$u.toast('请选择处理方式');
				if (!this.saveParams.dealUser) return uni.$u.toast('请选择处理人');
				if (this.saveParams.dealWay == 2) {
					if (!this.saveParams.description) return uni.$u.toast('请输入异常描述');
					if (!this.saveParams.pictures) return uni.$u.toast('请上传异常照片');

				}
				if (this.type == 1) {
					uni.$emit('xiong', this.saveParams)
				}
				if (this.type == 2) {
					uni.$emit('xiong2', this.saveParams)
				}
				uni.$u.toast('保存成功');
				setTimeout(() => {
					uni.navigateBack({
						delta: 1
					})
				}, 1000)

			}
		}
	}
</script>

<style lang="scss">
	.weibao-item {
		display: flex;
		flex-direction: column;
		padding: 32rpx;
		// border-bottom: 1px solid #f2f2f2;

		.item-top {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			color: #2b2b2b;

			.left {
				width: 85%;
				display: flex;
				word-break: break-all;
				word-wrap: break-word;
			}

			.right {
				color: #02AD82;
			}

			.right2 {
				color: #FF4D4D;
			}
		}

		.item-bottom {
			font-size: 32rpx;
			color: #4D4D4D;
			margin-top: 10rpx;
		}
	}

	.bx-list {
		background: #fff;

		.bx-list-title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 32rpx;

			.left {
				display: flex;
				font-size: 32rpx;
				font-weight: 400;
				// letter-spacing: 0px;
				// line-height: 0px;
				color: #4D4D4D;
			}

			.right {
				display: flex;
				justify-content: space-around;
				width: 50%;

				.sm-add {
					display: flex;
					align-items: center;
					padding: 10rpx 20rpx;
					border-radius: 24rpx;
					color: #0F53AC;
					background-color: rgba(2, 173, 130, 0.3);
					font-size: 24rpx;
				}

				.sm-sd {
					display: flex;
					align-items: center;
					padding: 10rpx 20rpx;
					border-radius: 24rpx;
					color: #0F53AC;
					background-color: rgba(2, 173, 130, 0.3);
					font-size: 24rpx;
				}
			}

			.right1 {
				display: flex;
				align-items: center;
				font-size: 32rpx;
				color: #8c8c8c;

				.right-input {
					width: 100%;
					text-align: right;
					display: flex;
					align-items: center;
				}
			}
		}

		.input-textrea {
			margin: 16rpx 32rpx 32rpx 32rpx;
			border-radius: 8rpx;
			background: #f2f2f2;

			.textrea {
				background: #f2f2f2;
			}
		}
	}

	.bx-title {
		background: #fff;
		padding: 20rpx;

		.left {
			display: flex;
			font-size: 32rpx;
			font-weight: 400;
			color: #4D4D4D;
			background: #fff;
		}
	}

	.bx-upload {
		padding: 0rpx 32rpx 32rpx 32rpx;
		background: #fff;
	}

	.bottom-subside {
		width: 100%;
		height: 206rpx;
	}

	.bx-bottom {
		width: 100%;
		display: flex;
		justify-content: space-around;
		align-items: center;
		padding: 33rpx 0 80rpx 0;
		position: fixed;
		z-index: 9;
		bottom: 0;
		background: #fff;

		.btn-right {
			width: 90%;
			height: 92rpx;
			border-radius: 12rpx;
			background: #0F53AC;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #fff;
			font-size: 34rpx;
			font-weight: 500;
			letter-spacing: 0px;
			line-height: 0px;
		}
	}

	.sex-select {
		.sex-item {
			word-break: break-all;
			word-wrap: break-word;
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 20rpx;
			border-bottom: 1px solid #f2f2f2;
		}
	}
</style>
